<template>
    <div class="details-container">
        <CBanner/>
        <div class="details-warp">
            <div class="details-header flex flex-ac">
                <span class="details-name" @click="toPage('Home')">首页</span>
                <span class="details-arrows">></span>
                <span class="details-name" @click="toPage('Information')">看看资讯</span>
                <span class="details-arrows">></span>
                <span class="details-name">资讯详情</span>
            </div>
            <div class="details-content flex jc-sb">
                <div class="details-content-lf">
                    <div class="details-title">{{ results.title }}</div>
                    <div class="company flex flex-ac jc-sb">
                        <div class="flex flex-ac">
                            <img class="company-img" :src="$imgUrl(results.kankan_avatar)" alt="" />
                            <span class="company-name">{{ results.kankan_author }}</span>
                            <div class="flex flex-ac">
                                <img class="company-eye" src="@/assets/img/information/eye.png" alt="" />
                                <span class="company-num">{{ results.view_count }}</span>
                            </div>
                        </div>
                        <div class="details-date">{{ results.create_time_year_month +'-'+ results.create_time_day}}</div>
                    </div>
                    <div class="details-txt" v-html="results.content"></div>
                </div>
                <div class="details-content-rg" v-if="!screenFlag">
                    <div class="details-more">更多推荐</div>
                    <div v-for="(item,index) in mores" :key="index" class="details-box flex flex-ac jc-sb" @click="toPage('LookDetails',{id: item.id})">
                        <img class="details-rg-img" :src="$imgUrl(item.image)" alt="" />
                        <span class="info-rg-content nowrap2">{{ item.title }}</span>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup>
import { useRoute,useRouter } from 'vue-router'
import { getArticleDetail, getMoreArticle} from '@/api/index.js'
import CBanner from '@/views/information/component/banner/index.vue'
import { watch } from 'vue';
const screenFlag = ref(window.innerWidth <=768);
const route = useRoute();
const router = useRouter();
const id = ref(null);
const mores = ref([]);
const results = ref({
    title:'',
    content: '',
    image:'',
    view_count: 0,
    create_time_year_month: '',
    create_time_day:'',
    kankan_avatar:'',
    kankan_author:''
});

//监听路由参数变化
watch(() => route,(newRoute, oldRoute) => {
        if(id.value){
            id.value = route.query.id;
            getMoreArticles();
            getArticleDetails();
        }
    },
    { deep: true, immediate: true }
);

//路由跳转
const toPage = (name,params) =>{
    router.push({ name ,query: params})
}

//获取文章详情
const getArticleDetails  = () =>{
    getArticleDetail({id: id.value}).then(res => {
        results.value = res.data;
    })
}
//更多
const getMoreArticles = () =>{
    getMoreArticle({id: id.value}).then(res => {
        mores.value = res.data;
    })
}

// 监听窗口大小变化
const addEvent = () =>{
  window.addEventListener('resize', function() {
        screenFlag.value = window.innerWidth <=768;
    });
}

//挂载
onMounted(() => {
    addEvent()
    id.value = route.query.id;
    localStorage.setItem('consult-tid', route.query.tid);
    localStorage.setItem('consult-page',route.query.page);
    getMoreArticles();
    getArticleDetails();
})
</script>

<style scoped lang="less">
@import './index.less';
</style>